<template>
	<view class="overall">
		<view class="main">
			<ul class="nav">
				<li v-for="(item,index) in navList" :key="index" :class = "{active:!(index-menuIndex)}" @click = 'menuShow(index)'>
					{{item.name}} 
				</li>
			</ul>
			
			<view v-show = 'menuIndex == 0'><!--此处可以换成子组件-->
                  <view class="feed-item">
                    <!-- 圆点 -->
                    <view class="circle circle-orange"></view>

                    <view class="feed-detail">
                        <view class="date">    
                            <p>2020-10-07</p>
                        </view>
                        <view class="title">测试动态</view>
                        <view class="content">
                            <p>测试内容</p>
                        </view>
                    </view>
                </view>
			</view>

			<view v-show = 'menuIndex == 1'>
                 <view class="feed-item">
                    <!-- 圆点 -->
                    <view class="circle circle-orange"></view>

                    <view class="feed-detail">
                        <view class="date">    
                            <p>2020-10-07</p>
                        </view>
                        <view class="title">开盘信息测试 :
                             <span>2020-10-09</span>
                        </view>
                       
                    </view>
                </view>
            </view>

			<view v-show = 'menuIndex == 2'>
                <view class="feed-item">
                    <!-- 圆点 -->
                    <view class="circle circle-orange"></view>

                    <view class="feed-detail">
                        <view class="date">    
                            <p>2020-10-07</p>
                        </view>
                        <view class="title">交房信息测试 :
                             <span>2020-10-09</span>
                        </view>
                       
                    </view>
                </view>
            </view>

            <view v-show = 'menuIndex == 3'>
                 <view class="feed-item">
                    <!-- 圆点 -->
                    <view class="circle circle-orange"></view>

                    <view class="feed-detail">
                        <view class="date">    
                            <p>2020-10-07</p>
                        </view>
                        <view class="title">证件信息测试</view>
                        <view class="tent">
                            <p>发证日期 :
                                <span>2020-10-09</span>
                            </p>
                        </view>
                    </view>
                </view>
            </view>
		</view>


	</view>
</template>

<script>

	import Mais from 'pages/index/transmit/Mais'


	export default {

		components: {
			Mais,
		},

		data() {
			return {	
        		menuIndex:0,
				navList:[
					{name:"楼盘动态"},
					{name:"开盘信息"},
                    {name:"交房信息"},
                    {name:"证件信息"},
				],	
			}
		},

		methods: {
			menuShow (index) {
				this.menuIndex = index
			}
    },
}
</script>

<style scoped>
	*{
		list-style: none;
		padding: 0 ;
		margin: 0;
	}
	.overall{
		padding: 0 20upx  20upx;
		margin-bottom: 20upx;
        background: #fff;
	}
    .nav{
        padding-top: 20upx;
    }
	.main>ul{
		width: 600upx;
		display: flex;
		flex-wrap: nowrap;
		margin: 0 auto;
		padding-bottom: 10upx;
	}
	.main>ul>li{
		height: 54upx;
		width: 148upx;
		text-align: center;
		line-height: 54upx;
        color: #77808a;
		font-size: 24upx;
        border-radius:6upx;   
        margin-left: 20upx;
        /* background: #f3f6f9; */
	}
	.active{	
        background: #13c3c3;
        border-radius:6upx;       
	}



	.feed-item{
        height: 710upx;
        width: 660upx;
		margin-bottom: 20upx;
		margin-left: 20upx;
        /* border:1px solid #ff9f24; */
    }
    .circle{
        height: 15upx;
        width: 15upx;
        border-radius: 50%;
        float: left;
		margin-left: 22upx;
		margin-top: 10upx;
    }
    .circle-orange{
         background: #13c3c3;
    }
    .feed-detail{
        /* height: 8.6rem; */
        width: 320upx;
        border-left:1upx solid #ecf0f4;
		margin-left: 110upx;
		margin-top: 20upx;
    }

    .date{
        width: 320upx;
		height: 38upx;
		margin-left: 20upx;
    }
    .status-tag{
        height:38upx;
        width:72upx;
       border-radius: 10upx 0 14upx 0;
       text-align: center;
       line-height: 38upx;
       color: #fff;
       font-size: 24upx;
       float: left;
       margin-right: 20upx;
    }


    .date>p{
        color: #77808a;
		font-size: 24upx;
		

    }
    .title{
        color: #3e4a59;
        font-size: 32upx;
        font-weight: 550;
        margin: 20upx 0 20upx 20upx;
    }
    .title>span{
        margin-left: 20upx;
    }

	 .content{
		width: 90%;
		padding:6upx 0  14upx  10upx;
		background: #f3f6f9;
		margin-left: 20upx;
	 }
    .content>P{
        width: 600upx;
        overflow: hidden; 
        white-space: nowrap; 
		text-overflow: ellipsis; 
		margin-left: 20upx;
		margin-top: 20upx;
    }

    .tent{
        margin-left: 20upx;
        font-size: 28upx;
    }
    .tent>p>span{
        padding-left: 20upx;
    }
</style>
